<script  setup>
// TODO: 编辑
import axios from 'axios';
import { ref,reactive, onUpdated, } from 'vue'
// import { FormInstance, FormRules } from 'element-plus'

// 弹框开关
const dialogVisible = ref(false)
const formSize = ref('default')
const ruleFormRef = ref(null)
const form = ref({
  Id: '',
  UserId: '',
  UserName: '',
  Sex: '',
  Birthday: '',
  Nation: '',
  IDCard: '',
  Title: '',
  PositionId: '',
  Degree: '',
  CompanyId: '',
  Email: '',
  TelNo: '',
  Remark: '',
  Status: '',
})
const open = (row) => {
  console.log(row.Id)
  form.value.Id = row.Id
  form.value.UserId = row.UserId
  form.value.UserName = row.UserName
  form.value.Sex = row.Sex
  form.value.Birthday = row.Birthday
  form.value.Nation = row.Nation
  form.value.IDCard = row.IDCard
  form.value.Title = row.Title
  form.value.PositionId = row.PositionId
  form.value.Degree = mapDegreeToValue(row.Degree)
  form.value.CompanyId = row.CompanyId
  form.value.Email = row.Email
  form.value.TelNo = row.TelNo
  form.value.Remark = row.Remark
  form.value.Status = mapStatusToBoolean(row.Status)
  console.log(form.value.Status)
  dialogVisible.value = true
}
defineExpose({
  open
})

// Helper function to map status strings to boolean
const mapStatusToBoolean = (status)=>{
  return status === '启用'; // Change this condition as needed
};
const mapDegreeToValue = (degree) => {
  const degreeMap = {
    '高中': '0',
    '大专': '1',
    '本科': '2',
    '硕士': '3',
    '博士': '4',
    '博士后': '5',
  };
  return degreeMap[degree] || '';
};
//更新
const emit = defineEmits(['on-update'])
const onUpdate = async () => {
  if (!ruleFormRef.value) return
  await ruleFormRef.value.validate(async (valid, fields) => { // 将这里的回调函数也标记为 async
    if (valid) {
      const selectedDate = new Date(form.value.Birthday);
      const year = selectedDate.getFullYear();
      const month = selectedDate.getMonth() + 1;
      const day = selectedDate.getDate();
      const formattedDate = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
      //1.收集数据 调接口
      console.log(form.value.Id)
      const statusForDB = form.value.Status 
      await axios.put(`http://127.0.0.1:5000/Term/Muser/${form.value.Id}`,{
        UserId: form.value.UserId,
        UserName: form.value.UserName,
        Sex: form.value.Sex,
        Birthday: formattedDate,
        Nation: form.value.Nation,
        IDCard: form.value.IDCard,
        Title: form.value.Title,
        PositionId: form.value.PositionId,
        Degree: form.value.Degree,
        CompanyId: form.value.CompanyId,
        Email: form.value.Email,
        TelNo: form.value.TelNo,
        Remark: form.value.Remark,
        Status: statusForDB,
      })
      //2.关闭弹窗
      dialogVisible.value = false
      //3.通知父组件
      emit('on-update')
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}


const rules = reactive({
  UserId: [
    { required: true, message: 'Username is required', trigger: 'blur' },
  ],
  UserName: [
    { required: true, message: 'Name is required', trigger: 'blur' },
  ],
  Email: [
    { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] },
  ],
  IDCard: [
  {
    pattern: /^[0-9]{17}[0-9xX]$/,
    message: '请输入正确格式的身份证号',
    trigger: 'blur',
  },
],
TelNo: [
  {
    pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/,
    message: '请输入有效的电话号码',
    trigger: 'blur',
  },
],
})

</script>

<template>
  <el-dialog v-model="dialogVisible" :title="'编辑用户' + form.UserId" width="750px">
  <el-form
    label-width="80px"
    class="demo-ruleForm"
    status-icon
    ref="ruleFormRef"
    :model="form"
    :rules="rules"
    :size="formSize"
  >
    <el-form-item>
      <el-col :span="11">
        <el-form-item label="用户名" prop="UserId" >
          <el-input v-model="form.UserId"  :disabled="true" />
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="姓名" prop="UserName">
          <el-input v-model="form.UserName" />
        </el-form-item>
      </el-col>
    </el-form-item>
    
    <el-form-item>
      <el-col :span="11">
        <el-form-item label="性别" prop="Sex">
          <el-radio-group v-model="form.Sex">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="出生日期">
        <el-form-item prop="Birthday">
          <el-date-picker
            v-model="form.Birthday"
            type="date"
            label="Birthday"
            placeholder="Birthday"
            style="width: 100%"
          />
  </el-form-item>
</el-form-item>
      </el-col>
    </el-form-item>

    <el-form-item>
      <el-col :span="11">
        <el-form-item label="民族" prop="Nation">
          <el-input v-model="form.Nation" />
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="身份证号" prop="IDCard">
          <el-input v-model="form.IDCard" />
        </el-form-item>
      </el-col>
    </el-form-item>

    <el-form-item>
      <el-col :span="11">
        <el-form-item label="职称" prop="Title">
          <el-select v-model="form.Title" placeholder="Title">
            <el-option label="1" value="1" />
            <el-option label="2" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="职位" prop="PositionId">
          <el-select v-model="form.PositionId" placeholder="职位">
            <el-option label="1" value="1" />
            <el-option label="2" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-form-item>

    <el-form-item>
      <el-col :span="11">
        <el-form-item label="学历" prop="Degree">
          <el-select v-model="form.Degree" placeholder="degree">
            <el-option label="高中" value="0" />
            <el-option label="大专" value="1" />
            <el-option label="本科" value="2" />
            <el-option label="硕士" value="3" />
            <el-option label="博士" value="4" />
            <el-option label="博士后" value="5" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="单位" prop="CompanyId">
          <el-select v-model="form.CompanyId" placeholder="company">
            <el-option label="1" value="1" />
            <el-option label="2" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-form-item>

    <el-form-item>
      <el-col :span="11">
        <el-form-item label="电子邮箱" prop="Email">
          <el-input v-model="form.Email" />
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="电话" prop="TelNo">
          <el-input v-model="form.TelNo" />
        </el-form-item>
      </el-col>
    </el-form-item>
    
    <el-form-item >
      <el-col :span="22">
        <el-form-item label="备注" prop="Remark">
          <el-input v-model="form.Remark" type="textarea" />
        </el-form-item>
      </el-col>
    </el-form-item>

    <el-form-item>
      <el-form-item label="状态" prop="Status">
        <el-switch v-model="form.Status" />
      </el-form-item>
    </el-form-item>

  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onUpdate">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-input {
  width: 200px;
}
</style>
